<template>
  <div class="stat-item">
    <el-icon :class="icon" class="stat-icon"></el-icon>
    <div class="stat-content">
      <div class="stat-value">{{ value }}</div>
      <div class="stat-title">{{ title }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StatItem',
  props: {
    icon: String,
    title: String,
    value: [Number, String]
  }
}
</script>

<style scoped>
.stat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: #f8f9fa;
  border-radius: 6px;

  .stat-icon {
    font-size: 24px;
    color: #409EFF;
  }

  .stat-content {
    line-height: 1.4;

    .stat-value {
      font-size: 18px;
      font-weight: bold;
    }

    .stat-title {
      color: #909399;
      font-size: 0.9em;
    }
  }
}
</style>